<!--
* @des: 项目管理
* @date: 2021-12-05 11:45:45
* @version:  1.0
*
* Date                   Author               Description
* ------------------------------------------------------
* 2021-12-05             曹天笑               创建
-->

<template>
    <div class="map-manage">
        <div class="flex-block">
            <div class="item-block tranRubbishBox">
                <!-- <div class="title">本月垃圾运载量</div> -->
                <div class="tranRubbish" id="tranRubbishChart"></div>
            </div>
            <div class="item-block">
                <div class="title">金东区垃圾占比</div>
                <div class="diy-legend area1">总站垃圾量：<span class="unit">5000吨</span></div>
                <ratio-chart :value="32" subtext="金东区" id="'RatioChart1'" />
            </div>
            <div class="item-block">
                <div class="title">婺城区垃圾占比</div>
                <div class="diy-legend area2">总站垃圾量：<span class="unit">5000吨</span></div>
                <ratio-chart :value="68" subtext="婺城区" id="'RatioChart2'" color="#70B4FB" />
            </div>
        </div>
        <div class="project-manage center-block">
            <div class="project-count">
                <div class="project-count-item">
                    <div class="num-box">
                        <span class="num">19800</span>
                        <span class="unit">平方米</span>
                    </div>
                    <div class="name">服务总面积</div>
                </div>
                <div class="project-count-item">
                    <div class="num-box">
                        <span class="num">19800</span>
                        <span class="unit">个</span>
                    </div>
                    <div class="name">站点数</div>
                </div>
                <div class="project-count-item">
                    <div class="num-box">
                        <span class="num">19800</span>
                        <span class="unit">千吨</span>
                    </div>
                    <div class="name">可容纳垃圾量</div>
                </div>
            </div>
            <div class="map-js">
                <img src="@/assets/images/icon-js.png" alt="" />
            </div>
        </div>
        <div class="project-manage2 right-block">
            <div class="item-block">
                <div class="title">今日垃圾运载量</div>
                <div class="dutyChartBox" id="dutyChart"></div>
            </div>
            <div class="item-block">
                <div class="title">垃圾统计</div>
                <rubbish-chart />
            </div>
        </div>
    </div>
</template>

<script>
import rubbishChart from '@/components/rubbishChart'
import RatioChart from '@/components/RatioChart'
export default {
    components: {
        'rubbish-chart': rubbishChart,
        'ratio-chart': RatioChart
    },
    mounted() {
        const self = this
        // 本月垃圾运载量
        const tranRubbishChart = self.$echarts.init(document.getElementById('tranRubbishChart'))
        const tranRubbishOption = {
            color: ['#34f3ce', '#b4c181'],
            grid: {
                left: '10%',
                right: '10%',
                top: '30%',
                bottom: '10%'
            },
            title: {
                text: '单位 : 吨',
                textStyle: {
                    fontSize: 16,
                    fontWeight: 'normal',
                    color: '#fff' //标题颜色
                },
                top: '50px',
                right: '20px'
            },
            legend: {
                show: true,
                icon: 'roundRect',
                top: '25px',
                right: '20px',
                itemWidth: 20,
                itemHeight: 10,
                itemGap: 30,
                textStyle: {
                    fontSize: 16,
                    color: '#fff'
                },
                data: [5000]
            },
            xAxis: {
                type: 'category',
                name: '日期',
                nameTextStyle: {
                    color: '#fff'
                },
                axisLine: {
                    lineStyle: {
                        color: '#556a98'
                    }
                },
                axisLabel: {
                    color: '#fff'
                },
                splitLine: {
                    show: false
                },
                boundaryGap: false,
                data: [8, 10, 12, 14, 16, 18]
            },
            yAxis: {
                type: 'value',
                name: '本月垃圾运载量',
                nameTextStyle: {
                    color: '#fff',
                    fontSize: 24,
                    lineHeight: 40,
                    padding: [0, 0, 0, 120]
                },
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: '#fff',
                        fontSize: 16
                    }
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#556a98'
                    }
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#fff'
                    }
                }
            },
            tooltip: {
                trigger: 'axis'
            },
            series: [
                {
                    name: '金东区',
                    data: [2, 1, 3, 2, 1, 2, 5],
                    type: 'line',
                    areaStyle: {
                        normal: {
                            color: self.$echarts.graphic.LinearGradient(
                                0,
                                0,
                                1,
                                0,
                                [
                                    {
                                        offset: 0,
                                        color: 'rgba(16,97,204, 0.3)'
                                    },
                                    {
                                        offset: 0.8,
                                        color: 'rgba(17,235,210, 0)'
                                    }
                                ],
                                false
                            ),
                            shadowColor: 'rgba(0, 0, 0, 0.1)',
                            shadowBlur: 20
                        }
                    },
                    smooth: true
                },
                {
                    name: '婺城区',
                    data: [1, 3, 2, 3, 1, 2, 3],
                    type: 'line',
                    areaStyle: {
                        normal: {
                            color: self.$echarts.graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [
                                    {
                                        offset: 0,
                                        color: 'rgba(205,52,42, 0.5)'
                                    },
                                    {
                                        offset: 0.8,
                                        color: 'rgba(235,235,21, 0)'
                                    }
                                ],
                                false
                            ),
                            shadowColor: 'rgba(0, 0, 0, 0.1)',
                            shadowBlur: 20
                        }
                    },
                    smooth: true
                }
            ]
        }
        tranRubbishChart.setOption(tranRubbishOption, true)
        // 报警统计
        const dutyChartBox = self.$echarts.init(document.getElementById('dutyChart'))
        const dutyOption = {
            color: ['#34f3ce', '#b4c181'],
            grid: {
                left: '8%',
                right: '10%',
                top: '20%',
                bottom: '80px'
            },
            legend: {
                show: true,
                icon: 'roundRect',
                bottom: '0',
                left: 'center',
                itemWidth: 60,
                itemHeight: 4,
                itemGap: 30,
                textStyle: {
                    fontSize: 16,
                    color: '#fff'
                }
            },
            xAxis: {
                type: 'category',
                axisLine: {
                    lineStyle: {
                        color: '#556a98'
                    }
                },
                axisLabel: {
                    color: '#fff'
                },
                splitLine: {
                    show: false
                },
                boundaryGap: false,
                data: [8, 10, 12, 14, 16, 18]
            },
            yAxis: {
                type: 'value',
                name: '吨      ',
                nameTextStyle: {
                    color: '#fff',
                    fontSize: 18,
                    lineHeight: 40
                },
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: '#fff',
                        fontSize: 14
                    }
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#556a98'
                    }
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#fff'
                    }
                }
            },
            tooltip: {
                trigger: 'axis'
            },
            series: [
                {
                    name: '金东区',
                    data: [2, 1, 3, 2, 1, 2, 5],
                    type: 'line',
                    smooth: true
                },
                {
                    name: '婺城区',
                    data: [1, 3, 2, 3, 1, 2, 3],
                    type: 'line',
                    smooth: true
                }
            ]
        }
        dutyChartBox.setOption(dutyOption, true)
    }
}
</script>
